<template>
    <DescribePanel :info="info" :editorwidth="800" :editorheight="200" :attributes="attributes" :events="events">
        <Slider :step="1" v-model:range="range" :min="0" :max="100" :width="300" :height="15"></Slider>
    </DescribePanel>
</template>
<script>
import DescribePanel from './DescribePanel'
import Slider from '../common/Slider'
export default {
	components: {
		Slider,
		DescribePanel
	},
	data() {
		return {
			range: 50,
			info: {
				title: 'Slider 滑块(原生js)',
				des: '通过拖动滑块在一个固定区间内进行选择。',
				editor: `\n<Slider v-model:range='range' :step="1" v-model:range="range" :min="0" :max="100" :width="300" :height="15"></Slider>\n\n<script>\n  data() {\n     return {\n    range:50,\n  }\n}\n<script>`
			},
			attributes: [
				{
					param: 'v-model:range',
					des: '绑定值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '0'
				},
				{
					param: 'min',
					des: '最小值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '0'
				},
				{
					param: 'max',
					des: '最大值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '100'
				},
				{
					param: 'step',
					des: '步长',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '5'
				},
				{
					param: 'width',
					des: '滑动条长度',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '100'
				},
				{
					param: 'height',
					des: '滑动条高度',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '15'
				},
				{
					param: 'disabled',
					des: '是否禁用',
					type: 'boolean',
					selectvalue: '——',
					defaultvalue: 'false'
				}
			],
			events: []
		}
	}
}
</script>
<style scoped>
</style>


